<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改商品</title>
    <link rel="stylesheet" href="__ACSS__/table.css">
    <script src="__AJS__/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="table-wrap">
    <div class="table-main">
        <div class="ibox-title">
            <h3>修改商品<small>&nbsp;&nbsp;下方填写数据均不能为空</small></h3>
        </div>
        <div class="ibox-content">
            <form action="{:url('admin/Goods/update',['id'=> $id])}" class="form-main" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <ul>
                        <li>
                            <span class="form-title">商品名</span>
                            <input class="form-text form-w50" type="text"  value="{$goods.goodsName}"  name="goodsName">
                            <em class="form-error">* 不能为空</em>
                        </li>
                        <li>
                            <span class="form-title">商品描述</span>
                            <input class="form-text form-w50" value="{$goods.description}" name="description">
                            <em class="form-error">* 不能为空</em>
                        </li>
                  
                        <li>
                            <span class="form-title">封面图片</span>
                            <div class="form-img" title="点击修改图片">
                                <input type="file" id="fileuploadgoods" class="fileupload-input" name="goodsImg">
                                <div class="form-img-box">
                                    <div class="form-pre-item">
                                        {if empty($goods.goodsImg)}
                                            <img src="">
                                        {else /}
                                            <img src="/uploads/goodsimg/{$goods.goodsImg}">
                                        {/if}
                                    </div>
                                    <em class="edit_img_icon">&nbsp;</em>
                                </div>
                            </div>
                        </li>
                        <li>
                            <span class="form-title">商品规格</span>
                            <div class="form-property">
                                <input class="form-text form-lower ml0" type="text" id="proname" name="proName"  value="{$proName}">
                                <em class="form-error">* 输入规格名称</em>

                                <div class="properName">
                                    {volist name="pro" id="v"}
                                    <input class="form-text form-w8 ml0" type="text" name="property[]" value="{$v.property}">
                                    {/volist}
                                    <a href="" id="addbtn">+ 添加</a>
                                </div>
                                <div class="property-table">
                                    <table>
                                        <thead>
                                        <tr>
                                            <th class="proName">{$proName}</th>
                                            <th>图片</th>
                                            <th>价格</th>
                                            <th>市场价</th>
                                            <th>库存</th>
                                            <th>销量</th>
                                        </tr>
                                        </thead>

                                        <tbody>
                                        {volist name="pro" id="v"}
                                        <tr>
                                            <td class="td">{$v.property}</td>
                                            <td>
                                                <div class="upload-img" title="点击修改图片">
                                                    <input type="file" id="fileupload{$key}" class="fileupload" name="proImg[]">
                                                    <div class="upload-img-box">
                                                        <div class="upload-pre-item">
                                                            {if empty($v.proImg)}
                                                                <img src="">
                                                            {else /}
                                                                <img src="/uploads/goodsimg/{$v.proImg}">
                                                            {/if}
                                                        </div>
                                                        <em class="edit_img_icon">&nbsp;</em>
                                                    </div>
                                                </div>
                                            </td>
                                            <td><input class="form-text form-w80 ml0" type="text" name="price[]"  value="{$v.price}"></td>
                                            <td><input class="form-text form-w80 ml0" type="text" name="marketPrice[]" value="{$v.marketPrice}"></td>
                                            <td><input class="form-text form-w80 ml0" type="text" name="store[]"  value="{$v.store}"></td>
                                            <td><input class="form-text form-w80 ml0" type="text" name="sales[]"  value="{$v.sales}"></td>
                                        </tr>
                                        {/volist}
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </li>
                       
                        <li>
                            <span class="form-title"></span>
                            <input class="form-submit-btn" type="submit" value="提交">
                            <a href="{:url('admin/goods/index')}" class="form-back-btn"  name="">返回</a>
                        </li>
                    </ul>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        //商品规格名称
        $('.form-property').on('input','#proname',function(){
            var proname =$(this).val();
            $('.property-table>table .proName').html(proname);
        });

        //规格下的名称
        $('.properName').on('input','input',function(){
            var val =$(this).val();
            var i = $(this).index();
            $('.property-table .td').eq(i).html(val);
        });

        // 编辑时获取当前几个规格
        var c= $('.fileupload').length;
        var m = c - 1;
        var pro = '<input class="form-text form-w8 ml0" type="text" name="property[]" value="">';
        $(document).on('click','#addbtn',function(){
            m++;
            var tr = '<tr><td class="td"></td><td><div class="upload-img" title="点击修改图片"><input type="file" id="fileupload'+m+'" class="fileupload" name="proImg[]"><div class="upload-img-box"><div class="upload-pre-item"><img src=" "></div><em class="edit_img_icon">&nbsp;</em></div></div></td><td><input class="form-text form-w80 ml0" type="text" name="price[]" value=""></td><td><input class="form-text form-w80 ml0" type="text" name="marketPrice[]" value=""></td><td><input class="form-text form-w80 ml0" type="text" name="store[]" value=""></td><td><input class="form-text form-w80 ml0" type="text" name="sales[]" value=""></td></tr>';
            var fileupload = '#fileupload'+m;
            $('table').append(tr);
            $('#addbtn').before(pro);
         
            if( !$(fileupload).next('div').find('.upload-pre-item').children('img').attr('src') == ' ' ){
                $(fileupload).next('div').find('.upload-pre-item').hide();
            } 
            return false;
        });


        // 本地化预览图片
        // 初始化 选项框的 背景 隐藏
        if( !$('.form-img-box>.form-pre-item>img').attr('src') ){
            $('.form-pre-item').hide();
        }
        if( !$('.upload-pre-item>img').attr('src') ){
            $('.upload-pre-item').hide();
        } 
        // 单个
        $('#fileuploadgoods').change(function(){
            var objUrl = getObjectURL(this.files[0]) ;
            if ( objUrl ) {
                $(this).next('div').find('.form-pre-item').children('img').attr('src',objUrl);
                $('.form-pre-item').show();
            }
        });
        
        // 批量
        $(document).on('change','.fileupload',function(){
            var id = $(this).attr('id');
            var fileid = '#'+id;
            var objUrl = getObjectURL(this.files[0]) ;
            if ( objUrl ) {
                $(fileid).next('div').find('.upload-pre-item').children('img').attr('src',objUrl);
                $(fileid).next('div').find('.upload-pre-item').show();
            }
        });
    });
    // 本地化预览图片
    //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        }else if (window.URL!=undefined) {
        // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) {
        // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }


</script>

</body>
</html>